<!DOCTYPE html>
<html lang="en">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta charset="UTF-8" />

  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
    crossorigin="anonymous"
  />

  <link
    rel="stylesheet"
    type="text/css"
    href="css/normalize.css"
    media="screen"
  />

  <link rel="stylesheet" href="fonts/stylesheet.css" />

  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  <link
    href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap"
    rel="stylesheet"
  />

  <link
    href="https://fonts.googleapis.com/css2?family=Jua&display=swap"
    rel="stylesheet"
  />

  <link
    href="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;500;600;700&display=swap"
    rel="stylesheet"
  />

  <link
    href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet"
  />

  <link
    href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet"
  />

  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet"
  />

  <link rel="stylesheet" href="css/index.css" />

  <title>Freak</title>

  <body>
    <div class="wrapper">
      <header>
        <div class="container">
          <nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
              <button
                class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="index.html"
                      ><img src="img/header1.svg" alt=""
                    /></a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" href="#"
                      ><img src="img/header2.svg" alt=""
                    /></a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" href="#"
                      ><img src="img/header3.svg" alt=""
                    /></a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" href="#">Freak Utility</a>
                  </li>

                  <li class="nav-item" id="login">
                    <a class="nav-link" href="#"
                      ><img src="img/header4.svg" alt=""
                    /></a>
                    <a href="#"><img src="img/header5.svg" alt="" /></a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </header>

      <body>
        <section class="freak">
          <div class="container">
            <div class="freak__block">
              <div class="row">
                <div class="col-5">
                  <div class="freak__block-left">
                    <div class="freak__block-left-title">
                      <img src="img/Filters1.svg" alt="" />
                      <p>Filters</p>
                    </div>

                    <div class="freak__block-left-top">
                      <p>Project</p>
                      <input type="text" placeholder="FreakUtility" />
                    </div>

                    <div class="freak__block-left-bottom">
                      <p>Auto-buy</p>
                      <div class="freak__block-left-bottom-main">
                        <div class="freak__block-left-bottom-main-left">
                          <p>Price Limit:</p>
                          <input type="text" placeholder="" />
                          <a href="#">Start auto-buy</a>
                        </div>

                        <div class="freak__block-left-bottom-main-right">
                          <p>Rarity limit:</p>
                          <input type="text" placeholder="" />
                          <a href="">Stop</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-7">
                  <div class="freak__block-right">
                    <div class="freak__block-right-top">
                      <div class="row">
                        <div class="col-6">
                          <div class="freak__block-right-top-frist">
                            <p>Project</p>
                          </div>
                        </div>
                        <div class="col-2">
                          <div class="freak__block-right-top-second">
                            <p>Price</p>
                          </div>
                        </div>
                        <div class="col-2">
                          <div class="freak__block-right-top-tree">
                            <p>Rarity</p>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="freak__block-right-body"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </body>
    </div>

    <script src="./index.js" type="module"></script>
    <!-- <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
      crossorigin="anonymous"
    ></script> -->
  </body>
</html>
